<script lang="ts">
	import Tag from '$lib/components/Basic/Tag/Tag.svelte';
	import CheckTag from '$lib/components/Basic/Tag/CheckTag.svelte';
	import Input from '$lib/components/Form/Input/Input.svelte';
	import RectButton from '$lib/components/Basic/Button/RectButton.svelte';
	import ComponentPreview from '$lib/components/Others/ComponentBrowser/ComponentPreview.svelte';
	import Table from '$lib/components/Data/Table/Table.svelte';
	import TableColumn from '$lib/components/Data/Table/TableColumn.svelte';
	import { tick } from 'svelte';

	// 原有 Tag 动态编辑相关状态（保持不变）
	let dynamicTags = $state<string[]>(['Tag 1', 'Tag 2', 'Tag 3']);
	let inputValue = $state('');
	let inputVisible = $state(false);
	let inputRef = $state<HTMLInputElement | null>(null);

	// 新增：CheckTag 示例状态（完全对齐 Element Plus 示例）
	let dynamicValue = $state(false);
	let dynamicValue1 = $state(true);
	let dynamicValue2 = $state(true);
	let dynamicValue3 = $state(true);
	let dynamicValue4 = $state(true);
	let dynamicValue5 = $state(true);
	let dynamicValue6 = $state(true);

	// 新增：CheckTag 事件回调（完全对齐 Element Plus 示例）
	const onDynamicChange = (value: boolean) => {
		dynamicValue = value;
	};
	const onDynamicChange1 = (value: boolean) => {
		dynamicValue1 = value;
	};
	const onDynamicChange2 = (value: boolean) => {
		dynamicValue2 = value;
	};
	const onDynamicChange3 = (value: boolean) => {
		dynamicValue3 = value;
	};
	const onDynamicChange4 = (value: boolean) => {
		dynamicValue4 = value;
	};
	const onDynamicChange5 = (value: boolean) => {
		dynamicValue5 = value;
	};
	const onDynamicChange6 = (value: boolean) => {
		dynamicValue6 = value;
	};

	// 原有 Tag 方法（保持不变）
	const handleClose = (tag: string) => {
		dynamicTags = dynamicTags.filter(item => item !== tag);
	};
	const handleInputBlur = () => {
		if (inputValue.trim() === '') {
			inputVisible = false;
		} else {
			handleInputConfirm();
		}
		inputRef?.removeEventListener('blur', handleInputBlur);
	};
	const handleInputConfirm = () => {
		if (inputValue.trim()) {
			dynamicTags = [...dynamicTags, inputValue.trim()];
		}
		inputVisible = false;
		inputValue = '';
	};
	const handleInputKeydown = (e: KeyboardEvent) => {
		if (e.key === 'Enter') {
			e.preventDefault();
			if (inputValue.trim()) {
				handleInputConfirm();
			} else {
				inputVisible = false;
				inputRef?.removeEventListener('blur', handleInputBlur);
			}
		}
	};
	const showInput = async () => {
		inputVisible = true;
		await tick();
		inputRef?.focus();
		inputRef?.addEventListener('blur', handleInputBlur);
	};

	// 原有 Tag 示例代码（保持不变）
	const code1 = `<script lang="ts">
	import Tag from '$lib/components/Basic/Tag/Tag.svelte';
<\/script>
<div class="example">
	<Tag variant="info">Tag1</Tag>
	<Tag variant="primary">Tag2</Tag>
	<Tag variant="secondary">Tag3</Tag>
	<Tag variant="success">Tag4</Tag>
	<Tag variant="warning">Tag5</Tag>
	<Tag variant="error">Tag6</Tag>
</div>`.trim();
	const code2 = `<script lang="ts">
	import Tag from '$lib/components/Basic/Tag/Tag.svelte';
<\/script>
<div class="example">
	<Tag variant="primary" size="lg">大</Tag>
    <Tag variant="primary" size="md">中</Tag>
    <Tag variant="primary" size="sm">小</Tag>
</div>`.trim();
	const code3 = `<script lang="ts">
	import Tag from '$lib/components/Basic/Tag/Tag.svelte';
<\/script>
<div class="example">
	<div class="tag-row">
		<Tag variant="info" round>Tag1</Tag>
		<Tag variant="primary" round>Tag2</Tag>
		<Tag variant="secondary" round>Tag3</Tag>
		<Tag variant="success" round>Tag4</Tag>
		<Tag variant="warning" round>Tag5</Tag>
		<Tag variant="error" round>Tag6</Tag>
	</div>
	<div class="tag-row">
		<Tag variant="info" theme="dark" round>Tag1</Tag>
		<Tag variant="primary" theme="dark" round>Tag2</Tag>
		<Tag variant="secondary" theme="dark" round>Tag3</Tag>
		<Tag variant="success" theme="dark" round>Tag4</Tag>
		<Tag variant="warning" theme="dark" round>Tag5</Tag>
		<Tag variant="error" theme="dark" round>Tag6</Tag>
	</div>
	<div class="tag-row">
		<Tag variant="info" theme="plain" round>Tag1</Tag>
		<Tag variant="primary" theme="plain" round>Tag2</Tag>
		<Tag variant="secondary" theme="plain" round>Tag3</Tag>
		<Tag variant="success" theme="plain" round>Tag4</Tag>
		<Tag variant="warning" theme="plain" round>Tag5</Tag>
		<Tag variant="error" theme="plain" round>Tag6</Tag>
	</div>
</div>`.trim();
	const code4 = `<script lang="ts">
	import Tag from '$lib/components/Basic/Tag/Tag.svelte';
<\/script>
<div class="example" style="display: block;">
	<!-- Light 主题（默认） -->
	<div class="category">Light 主题</div>
	<div class="tag-row">
		<Tag variant="info">Tag1</Tag>
		<Tag variant="primary">Tag2</Tag>
		<Tag variant="secondary">Tag3</Tag>
		<Tag variant="success">Tag4</Tag>
		<Tag variant="warning">Tag5</Tag>
		<Tag variant="error">Tag6</Tag>
	</div>
	<div class="category">Dark 主题</div>
	<div class="tag-row">
		<Tag variant="info" theme="dark">Tag1</Tag>
		<Tag variant="primary" theme="dark">Tag2</Tag>
		<Tag variant="secondary" theme="dark">Tag3</Tag>
		<Tag variant="success" theme="dark">Tag4</Tag>
		<Tag variant="warning" theme="dark">Tag5</Tag>
		<Tag variant="error" theme="dark">Tag6</Tag>
	</div>
	<div class="category">Plain 主题</div>
	<div class="tag-row">
		<Tag variant="info" theme="plain">Tag1</Tag>
		<Tag variant="primary" theme="plain">Tag2</Tag>
		<Tag variant="secondary" theme="plain">Tag3</Tag>
		<Tag variant="success" theme="plain">Tag4</Tag>
		<Tag variant="warning" theme="plain">Tag5</Tag>
		<Tag variant="error" theme="plain">Tag6</Tag>
	</div>
</div>`.trim();
	const code5 = `<script lang="ts">
	import Tag from '$lib/components/Basic/Tag/Tag.svelte';
<\/script>
<div class="example">
	<Tag variant="info" closable onClose={(e: MouseEvent) => console.log('标签移除', e)}>Tag1</Tag>
	<Tag variant="primary" closable disableTransitions>Tag2</Tag>
	<Tag variant="secondary" closable>Tag3</Tag>
	<Tag variant="success" closable>Tag4</Tag>
	<Tag variant="warning" closable>Tag5</Tag>
	<Tag variant="error" closable>Tag6</Tag>
</div>`.trim();
	const code6 = `<script lang="ts">
	import Tag from '$lib/components/Basic/Tag/Tag.svelte';
	import Input from '$lib/components/Form/Input/Input.svelte';
	import RectButton from '$lib/components/Basic/Button/RectButton.svelte';
	import { tick } from 'svelte';

	let dynamicTags = $state<string[]>(['Tag 1', 'Tag 2', 'Tag 3']);
	let inputValue = $state('');
	let inputVisible = $state(false);
	let inputRef = $state<HTMLInputElement | null>(null);

	const handleClose = (tag: string) => {
		dynamicTags = dynamicTags.filter(item => item !== tag);
	};
	const handleInputBlur = () => {
		if (inputValue.trim() === '') {
			inputVisible = false;
		} else {
			handleInputConfirm();
		}
		inputRef?.removeEventListener('blur', handleInputBlur);
	};
	const handleInputConfirm = () => {
		if (inputValue.trim()) {
			dynamicTags = [...dynamicTags, inputValue.trim()];
		}
		inputVisible = false;
		inputValue = '';
	};
	const handleInputKeydown = (e: KeyboardEvent) => {
		if (e.key === 'Enter') {
			e.preventDefault();
			if (inputValue.trim()) {
				handleInputConfirm();
			} else {
				inputVisible = false;
				inputRef?.removeEventListener('blur', handleInputBlur);
			}
		}
	};
	const showInput = async () => {
		inputVisible = true;
		await tick();
		inputRef?.focus();
		inputRef?.addEventListener('blur', handleInputBlur);
	};
<\/script>
<div class="example flex gap-2 items-center flex-wrap">
	{#each dynamicTags as tag (tag)}
		<Tag
			variant="primary"
			closable
			disableTransitions={false}
			onClose={() => handleClose(tag)}
		>{tag}</Tag>
	{/each}
	{#if inputVisible}
		<Input
			bind:value={inputValue}
			bind:inputRef={inputRef}
			placeholder="输入标签"
			size="sm"
			onKeydown={handleInputKeydown}
			width="80"
		/>
	{:else}
		<RectButton  variant="info" type="ghost" size="sm" onclick={showInput} >+ New Tag</RectButton>
	{/if}
</div>`.trim();

	// 新增：CheckTag 示例代码（完全对齐 Element Plus 官方示例）
	const code7 = `<script lang="ts">
	import CheckTag from '$lib/components/Basic/Tag/CheckTag.svelte';
	import { $state } from 'svelte/store';

	let dynamicValue = $state(false);
	let dynamicValue1 = $state(true);
	let dynamicValue2 = $state(true);
	let dynamicValue3 = $state(true);
	let dynamicValue4 = $state(true);
	let dynamicValue5 = $state(true);
	let dynamicValue6 = $state(true);

	const onDynamicChange = (value: boolean) => {
		dynamicValue = value;
	};
	const onDynamicChange1 = (value: boolean) => {
		dynamicValue1 = value;
	};
	const onDynamicChange2 = (value: boolean) => {
		dynamicValue2 = value;
	};
	const onDynamicChange3 = (value: boolean) => {
		dynamicValue3 = value;
	};
	const onDynamicChange4 = (value: boolean) => {
		dynamicValue4 = value;
	};
	const onDynamicChange5 = (value: boolean) => {
		dynamicValue5 = value;
	};
	const onDynamicChange6 = (value: boolean) => {
		dynamicValue6 = value;
	};
<\/script>

<div class="example flex gap-2">
	<CheckTag checked>Checked</CheckTag>
	<CheckTag bind:modelValue={dynamicValue} onChange={onDynamicChange}>Toggle</CheckTag>
	<CheckTag disabled>Disabled</CheckTag>
</div>
<div class="example flex gap-2 mt-4">
	<CheckTag variant="primary" bind:modelValue={dynamicValue1} onChange={onDynamicChange1}>Tag 1</CheckTag>
	<CheckTag variant="success" bind:modelValue={dynamicValue2} onChange={onDynamicChange2}>Tag 2</CheckTag>
	<CheckTag variant="info" bind:modelValue={dynamicValue3} onChange={onDynamicChange3}>Tag 3</CheckTag>
	<CheckTag variant="warning" bind:modelValue={dynamicValue4} onChange={onDynamicChange4}>Tag 4</CheckTag>
	<CheckTag variant="error" bind:modelValue={dynamicValue5} onChange={onDynamicChange5}>Tag 5</CheckTag>
	<CheckTag variant="success" disabled bind:modelValue={dynamicValue6} onChange={onDynamicChange6}>Tag 6</CheckTag>
</div>`.trim();

	// 原有 Tag 属性/事件数据（保持不变）
	const attributesData = [
		{ id: 1, name: 'size', describe: '标签尺寸', type: ['sm', 'md', 'lg'], defaulValue: 'md' },
		{ id: 2, name: 'variant', describe: '标签主题色，与组件库主题色保持一致', type: ['info', 'primary', 'secondary', 'success', 'warning', 'error'], defaulValue: 'info' },
		{ id: 3, name: 'theme', describe: '标签风格主题（不传该属性时默认使用 light 主题）', type: ['dark', 'light', 'plain'], defaulValue: 'light' },
		{ id: 4, name: 'round', describe: '是否为圆形标签', type: 'boolean', defaulValue: 'false' },
		{ id: 5, name: 'closable', describe: '是否可移除标签', type: 'boolean', defaulValue: 'false' },
		{ id: 6, name: 'disableTransitions', describe: '是否关闭移除时的渐变动画', type: 'boolean', defaulValue: 'false' },
		{ id: 7, name: 'disabled', describe: '是否禁用标签（禁用后所有操作按钮失效）', type: 'boolean', defaulValue: 'false' }
	];
	const eventsData = [
		{ id: 1, name: 'onClose', describe: '标签被移除时触发的事件（与 Element Plus 一致，动态编辑标签删除功能依赖）', type: '(e: MouseEvent) => void' },
	];
	const checkTagAttributesData = [
		// { 
		// 	id: 1, 
		// 	name: 'checked', 
		// 	describe: '选中', 
		// 	type: 'boolean', 
		// 	defaulValue: 'undefined' 
		// },
		{ 
			id: 1, 
			name: 'modelValue', 
			describe: '动态绑定状态（支持双向绑定，可切换），用于交互场景', 
			type: 'boolean', 
			defaulValue: 'false' 
		},
		{ id: 2, name: 'disabled', describe: '是否禁用', type: 'boolean', defaulValue: 'false' },
		{ id: 3, name: 'variant', describe: '标签类型（对应 Element Plus 的 type）', type: ['primary', 'info', 'success', 'warning', 'error'], defaulValue: 'primary' },
		{ id: 4, name: 'theme', describe: '标签主题风格', type: ['light', 'dark', 'plain'], defaulValue: 'light' }
	];

	// CheckTag 精简事件数据
	const checkTagEventsData = [
		{ id: 1, name: 'onChange', describe: '选中状态变化时触发，返回当前选中状态', type: '(status: boolean) => void' }
	];
</script>

<div class="component-container">
	<div class="title">
		<div class="name">Tag 标签</div>
		<div class="describe">用于标记和分类的小标签，支持自定义主题、尺寸、圆形、可移除及动态编辑（动态编辑功能与 Element Plus 保持一致）。</div>
	</div>

	<!-- 基础用法（保持不变） -->
	<div class="subtitle">
		<div class="name">基础用法</div>
		<div class="describe">通过<span class="keyword">&nbsp;variant&nbsp;</span>属性设置不同主题色的标签，默认使用 light 主题。</div>
	</div>
	<ComponentPreview code={code1}>
		<div class="example">
			<Tag variant="info">Tag1</Tag>
            <Tag variant="primary">Tag2</Tag>
            <Tag variant="secondary">Tag3</Tag>
            <Tag variant="success">Tag4</Tag>
            <Tag variant="warning">Tag5</Tag>
            <Tag variant="error">Tag6</Tag>
		</div>
	</ComponentPreview>

	<!-- 主题（保持不变） -->
	<div class="subtitle">
		<div class="name">主题</div>
		<div class="describe">通过<span class="keyword">&nbsp;theme&nbsp;</span>属性设置标签风格，支持<span class="tag">light</span>（默认）、<span class="tag">dark</span>（深色）、<span class="tag">plain</span>（极简）三种主题，可与任意 variant 组合。</div>
	</div>
	<ComponentPreview code={code4}>
		<div class="example" style="display: block;">
			<div class="category">Light 主题（默认）</div>
			<div class="tag-row">
				<Tag variant="info">Tag1</Tag>
				<Tag variant="primary">Tag2</Tag>
				<Tag variant="secondary">Tag3</Tag>
				<Tag variant="success">Tag4</Tag>
				<Tag variant="warning">Tag5</Tag>
				<Tag variant="error">Tag6</Tag>
			</div>
		
			<div class="category">Dark 主题（深色模式）</div>
			<div class="tag-row">
				<Tag variant="info" theme="dark">Tag1</Tag>
				<Tag variant="primary" theme="dark">Tag2</Tag>
				<Tag variant="secondary" theme="dark">Tag3</Tag>
				<Tag variant="success" theme="dark">Tag4</Tag>
				<Tag variant="warning" theme="dark">Tag5</Tag>
				<Tag variant="error" theme="dark">Tag6</Tag>
			</div>
			<div class="category">Plain 主题（极简风格）</div>
			<div class="tag-row">
				<Tag variant="info" theme="plain">Tag1</Tag>
				<Tag variant="primary" theme="plain">Tag2</Tag>
				<Tag variant="secondary" theme="plain">Tag3</Tag>
				<Tag variant="success" theme="plain">Tag4</Tag>
				<Tag variant="warning" theme="plain">Tag5</Tag>
				<Tag variant="error" theme="plain">Tag6</Tag>
			</div>
		</div>
	</ComponentPreview>

	<!-- 尺寸控制（保持不变） -->
	<div class="subtitle">
		<div class="name">尺寸</div>
		<div class="describe">通过<span class="keyword">&nbsp;size&nbsp;</span>属性设置标签尺寸，支持<span class="tag">sm</span>（小）、<span class="tag">md</span>（中，默认）、<span class="tag">lg</span>（大）三种尺寸。</div>
	</div>
	<ComponentPreview code={code2}>
		<div class="example">
            <Tag variant="primary" size="lg">大</Tag>
			<Tag variant="primary" size="md">中</Tag>
            <Tag variant="primary" size="sm">小</Tag>
		</div>
	</ComponentPreview>

	<!-- 圆形标签（保持不变） -->
	<div class="subtitle">
		<div class="name">圆形标签</div>
		<div class="describe">通过<span class="keyword">&nbsp;round&nbsp;</span>属性设置圆形标签，可与任意主题、尺寸组合使用。</div>
	</div>
	<ComponentPreview code={code3}>
		<div class="example">
			<div class="tag-row">
				<Tag variant="info" round>Tag1</Tag>
				<Tag variant="primary" round>Tag2</Tag>
				<Tag variant="secondary" round>Tag3</Tag>
				<Tag variant="success" round>Tag4</Tag>
				<Tag variant="warning" round>Tag5</Tag>
				<Tag variant="error" round>Tag6</Tag>
			</div>
			<div class="tag-row">
				<Tag variant="info" theme="dark" round>Tag1</Tag>
				<Tag variant="primary" theme="dark" round>Tag2</Tag>
				<Tag variant="secondary" theme="dark" round>Tag3</Tag>
				<Tag variant="success" theme="dark" round>Tag4</Tag>
				<Tag variant="warning" theme="dark" round>Tag5</Tag>
				<Tag variant="error" theme="dark" round>Tag6</Tag>
			</div>
			<div class="tag-row">
				<Tag variant="info" theme="plain" round>Tag1</Tag>
				<Tag variant="primary" theme="plain" round>Tag2</Tag>
				<Tag variant="secondary" theme="plain" round>Tag3</Tag>
				<Tag variant="success" theme="plain" round>Tag4</Tag>
				<Tag variant="warning" theme="plain" round>Tag5</Tag>
				<Tag variant="error" theme="plain" round>Tag6</Tag>
			</div>
		</div>
	</ComponentPreview>

	<!-- 可移除标签（保持不变） -->
	<div class="subtitle">
		<div class="name">可移除标签</div>
		<div class="describe">
			通过<span class="keyword">&nbsp;closable&nbsp;</span>属性控制标签是否可移除（默认 false）；
			默认自带<span class="keyword">渐变移除动画</span>，通过<span class="keyword">&nbsp;disableTransitions={true}&nbsp;</span>可关闭动画;
			标签被移除时会触发<span class="keyword">&nbsp;onClose&nbsp;</span>事件，禁用状态（disabled）下移除功能失效。
		</div>
	</div>
	<ComponentPreview code={code5}>
		<div class="example">
			<Tag variant="info" closable onClose={(e: MouseEvent) => console.log('标签移除', e)}>Tag1</Tag>
			<Tag variant="primary" closable disableTransitions>Tag2</Tag>
			<Tag variant="secondary" closable>Tag3</Tag>
			<Tag variant="success" closable>Tag4</Tag>
			<Tag variant="warning" closable>Tag5</Tag>
			<Tag variant="error" closable>Tag6</Tag>
		</div>
	</ComponentPreview>

	<!-- 动态编辑标签（保持不变） -->
	<div class="subtitle">
		<div class="name">动态编辑标签</div>
		<div class="describe">
			通过<span class="keyword">&nbsp;closable&nbsp;</span>属性的<span class="keyword">&nbsp;onClose&nbsp;</span>事件实现标签删除；<br>
			点击「+ New Tag」按钮显示输入框，<span class="keyword">自动聚焦</span>输入框；<br>
			支持<span class="keyword">按回车</span>或<span class="keyword">失焦</span>添加标签（空值失焦自动关闭输入框）。
		</div>
	</div>
	<ComponentPreview code={code6}>
		<div class="example flex gap-2 items-center flex-wrap">
			{#each dynamicTags as tag (tag)}
				<Tag
					variant="primary"
					closable
					disableTransitions={false}
					onClose={() => handleClose(tag)}
				>{tag}</Tag>
			{/each}

			{#if inputVisible}
				<Input
					bind:value={inputValue}
					bind:inputRef={inputRef}
					placeholder="输入标签"
					size="sm"
					onKeydown={handleInputKeydown}
					width="80"
				/>
			{:else}
				<RectButton variant="info" type="ghost" size="sm" onclick={showInput} >+ New Tag</RectButton>
			{/if}
		</div>
	</ComponentPreview>

	<!-- 新增：可选中标签（CheckTag）独立章节 -->
	<div class="subtitle">
		<div class="name">可选中标签（CheckTag）</div>
		<div class="describe">
			复选框式标签，用于多选项标记，用法与 Element Plus CheckTag 完全一致；<br>
			通过<span class="keyword">&nbsp;checked&nbsp;</span>双向绑定选中状态，<span class="keyword">&nbsp;onChange&nbsp;</span>事件监听状态变化；<br>
			支持<span class="keyword">&nbsp;disabled&nbsp;</span>禁用选中切换，与 Tag 组件共享主题、尺寸、圆形等属性。
		</div>
	</div>
	<ComponentPreview code={code7}>
		<!-- CheckTag 示例预览（完全对齐 Element Plus 效果） -->
		<div class="example flex gap-2">
			<CheckTag checked>Checked</CheckTag>
			<CheckTag bind:modelValue={dynamicValue} onChange={onDynamicChange}>Toggle</CheckTag>
			<CheckTag disabled>Disabled</CheckTag>
		</div>
		<div class="example flex gap-2 mt-4">
			<CheckTag variant="primary" bind:modelValue={dynamicValue1} onChange={onDynamicChange1}>Tag 1</CheckTag>
			<CheckTag variant="success" bind:modelValue={dynamicValue2} onChange={onDynamicChange2}>Tag 2</CheckTag>
			<CheckTag variant="info" bind:modelValue={dynamicValue3} onChange={onDynamicChange3}>Tag 3</CheckTag>
			<CheckTag variant="warning" bind:modelValue={dynamicValue4} onChange={onDynamicChange4}>Tag 4</CheckTag>
			<CheckTag variant="error" bind:modelValue={dynamicValue5} onChange={onDynamicChange5}>Tag 5</CheckTag>
			<CheckTag variant="success" disabled bind:modelValue={dynamicValue6} onChange={onDynamicChange6}>Tag 6</CheckTag>
		</div>
	</ComponentPreview>
	
	<!-- 原有 Tag 属性说明（保持不变） -->
	<div class="subtitle">
		<div class="name">Tag Attributes</div>
	</div>
	<Table data={attributesData} border={false} size="lg">
		<TableColumn key="name" title="属性名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}>
			{#snippet cell(scope)}
				{#if Array.isArray(scope.row.type)}
					<span style="display:inline-flex; gap: 10px; flex-wrap: wrap;">
						{#each scope.row.type as item}
							<span class="tag">{item}</span>
						{/each}
					</span>
				{:else}
					<span>{scope.row.type}</span>
				{/if}
			{/snippet}
		</TableColumn>
		<TableColumn key="defaulValue" title="默认值" align="left" minWidth={150} />
	</Table>

	<!-- 原有 Tag 事件说明（保持不变） -->
	<div class="subtitle">
		<div class="name">Tag Events</div>
	</div>
	<Table data={eventsData} border={false} size="lg">
		<TableColumn key="name" title="事件名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}/>
	</Table>
	<div class="subtitle">
		<div class="name">CheckTag Attributes</div>
	</div>
	<Table data={checkTagAttributesData} border={false} size="lg">
		<TableColumn key="name" title="属性名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={200} />
		<TableColumn key="defaulValue" title="默认值" align="left" minWidth={150} />
	</Table>

	<div class="subtitle">
		<div class="name">CheckTag Events</div>
	</div>
	<Table data={checkTagEventsData} border={false} size="lg">
		<TableColumn key="name" title="事件名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={200}/>
	</Table>
</div>

<!-- 样式优化：补充 CheckTag 布局样式（与现有 Tag 兼容） -->
<style>
	/* 全局示例容器：基础布局 */
	.example {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-bottom: 20px;
	}

	/* Tag行：横向排列Tag，自动换行 */
	.tag-row {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
	}

	/* 分类标题样式 */
	.category {
		font-weight: 500;
		color: #606266;
		margin: 10px 0;
	}

	/* 动态编辑标签专用样式 */
	.flex {
		display: flex;
		flex-direction: row;
	}
	.gap-2 {
		gap: 10px;
	}
	.items-center {
		align-items: center;
	}
	.flex-wrap {
		flex-wrap: wrap;
	}

	/* 基础用法/尺寸/可移除标签/CheckTag：强制横向排列 */
	.example:not(.theme-group-container) {
		flex-direction: row;
		gap: 10px;
		flex-wrap: wrap;
	}
</style>